<template>
	<view class="carditem bzcard" style="height: 560rpx">
		<view class="title">
			在线班组人数占比
		</view>
		<scroll-view class="bzscrollView" :scroll-y="true" :show-scrollbar="true">
			<view class="">
				<view class="bzitem" v-for="(item,index) in list" :key="index">
					<view class="bztitle u-flex-y-center">
						<view class="dian"></view>
						<view class="name">
							{{item.name}}
							<!-- -安装班组 -->
						</view>
						<view class="r1">
							{{item.num}}人
						</view>
						<view class="r2">
							{{item.online}}人
						</view>
					</view>
					<view class="jdt">
						<view class="jdtcontent" :style="itemstyle(item)">

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<!-- name
: 
"冉定安劳务队"
num
: 
93
online
: -->
<script>
import {getTeamOnlineWorkerStatic} from '@/api/index'
	export default {
		data() {
			return {
				list:[]
			}
		},
		mounted() {
	},
		methods: {
			async init(projectId) {
				let res = await getTeamOnlineWorkerStatic({
					projectId: projectId
				})
				this.list = res.data

			},
			itemstyle(item) {
				return {
					width: item.online / item.num * 100 + '%'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carditem {
		margin: 0 32rpx;
		color: #fff;
		border-radius: 12px;
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)),
			rgba(255, 255, 255, 0.08);
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(20px);
		box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
	}

	.bzcard {
		.title {
			display: flex;
			align-items: center;
			padding: 0 34rpx;
			height: 120rpx;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 56rpx;
		}

		.bzscrollView {
			height: 400rpx;
		}

		.bzitem {
			margin: 24rpx 34rpx;
			border-radius: 12px;
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), rgba(255, 255, 255, 0.08);
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(20px);
			box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.2);
			padding: 10rpx 0 26rpx 0;

			.jdt {
				background: #374151;
				border-radius: 8rpx;
				height: 8rpx;
				margin: 0 26rpx;
				position: relative;

				.jdtcontent {
					border-radius: 8rpx;
					height: 8rpx;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(90deg, #31D2F2 0%, #2C3E6B 100%);
				}
			}

			.bztitle {
				font-size: 28rpx;
				line-height: 40rpx;
				padding: 0 24rpx;
				height: 72rpx;

				.dian {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background: #31D2F2;
				}

				.name {
					width: 0;
					flex: 1;
					padding-left: 24rpx;
				}

				.r1 {
					color: #D1D5DB;
					padding-right: 20rpx;
				}

				.r2 {
					color: #31D2F2;
					min-width: 80rpx;
					text-align: right;
				}
			}
		}
	}
</style>